<template>
	<div class="component-configurator" v-if="isInstanceInited">
		<el-tabs
			v-if="!ifUpdate"
			v-model="state.activeTab"
			type="border-card"
			class="configurator-tabs">
			<el-tab-pane label="基础" name="1">
				<ComponentConfiguationTransformer
					class="right-sider cpnt-configurer"
					@setConfiguredDataToInstance="setConfiguredDataToInstance"
					:id="currentCpntInstance.uuid"
					:instance="currentCpntInstance"
					:configData="currentCpntInstance.configData" />
			</el-tab-pane>
			<el-tab-pane label="数据" name="2">
				<DataSourceConfigurator
					v-if="state.activeTab === '2'"
					:id="currentCpntInstance.uuid"
					:instance="currentCpntInstance"
					:setConfiguredDataToInstance="setConfiguredDataToInstance"
					class="data-source-configurator"></DataSourceConfigurator>
			</el-tab-pane>
			<el-tab-pane label="交互" name="3">
				<ComponentsInteractionManager
					v-if="state.activeTab === '3'"
					:setConfiguredDataToInstance="setConfiguredDataToInstance"
					:id="currentCpntInstance.uuid"
					:instance="currentCpntInstance"
					class="components-interaction-manager"></ComponentsInteractionManager>
			</el-tab-pane>
			<el-tab-pane label="资源" name="4">
				<ComponentStaticResourceManagement
					v-if="state.activeTab === '4'"
					:setConfiguredDataToInstance="setConfiguredDataToInstance"
					:id="currentCpntInstance.uuid"
					:instance="currentCpntInstance"
					class="component-static-resource-management"></ComponentStaticResourceManagement>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, toRefs, computed, onUpdated, ref, watch } from 'vue';
import _ from 'lodash';
import ComponentConfiguationTransformer from './ComponentConfiguationTransformer/index.vue';
import DataSourceConfigurator from './DataSourceConfigurator/index.vue';
import ComponentsInteractionManager from './ComponentsInteractionManager/index.vue';
import ComponentStaticResourceManagement from './ComponentStaticResourceManagement/index.vue';
import { ComponentTreeHelper } from '../ComponentTemplate/componentTree';
import { usePrimaryStore } from '@/store';

const store = usePrimaryStore();

const state = reactive({
	activeTab: '1'
});
const currentCpntInstance = computed(() => {
	if (_.get(window, 'cif.config.logger.enable', false) === true) {
		console.log(
			'CIF.ComponentConfigurator:computed.currentCpntInstance',
			store.getSelectedInstance
		);
	}
	const res = store.getSelectedInstance ? store.getSelectedInstance : {};
	return res;
});
const ifUpdate = ref<boolean>(false);
watch(
	() => currentCpntInstance.value.uuid,
	(newVal) => {
		console.log('newVal-currentCpntInstance', newVal);
		ifUpdate.value = true;
		setTimeout(() => {
			ifUpdate.value = false;
		}, 0);
	},
	{ deep: true }
);
const isInstanceInited = computed(() => {
	const result = !_.isEmpty(currentCpntInstance.value);
	if (_.get(window, 'cif.config.logger.enable', false) === true) {
		console.log('CIF.ComponentConfigurator:computed.isInstanceInited', result);
	}
	return result;
});

// mergeData的结构应该和instance一样
function setConfiguredDataToInstance(instanceId: any, mergeData: any) {
	if (_.get(window, 'cif.config.logger.enable', false) === true) {
		console.log(
			'CIF.ComponentConfigurator:setConfiguredDataToInstance 将修改后的组件配置设置至组件实例'
		);
	}
	const cpntTreeNode = reactive(ComponentTreeHelper.findTreeNodeQuick(instanceId));
	if (!_.isEmpty(cpntTreeNode.componentInstance)) {
		//一定要用响应式包裹，不然页面不会更新
		const instance = reactive(_.get(cpntTreeNode, 'componentInstance'));
		Object.keys(mergeData).forEach((key) => {
			instance[key] = _.cloneDeep(mergeData[key]);
			// this.$set(instance, key, mergeData[key]);
		});
		store.setSelectedInstance(instance);
	}
}

onMounted(() => {});
onUpdated(() => {
	if (_.get(window, 'cif.config.logger.enable', false) === true) {
		console.log('CIF.ComponentConfigurator:updated');
	}
});
defineExpose({ ...toRefs(state) });
</script>

<style lang="scss" scoped>
.component-configurator {
	width: 340px;
	height: 100%;
	background: transparent;
	color: #fff;
	font-size: 14px;
}

.configurator-tabs {
	height: 100%;
	border: none;

	:deep(.el-tabs__content) {
		// height: calc(100% - 39px);
		height: calc(100% - 16px);
		overflow: visible;

		.el-tab-pane {
			height: 100%;

			.cpnt-configurer {
				height: 100%;
			}

			.data-source-configurator {
				height: 100%;
			}

			.components-interaction-manager {
				height: 100%;
			}

			.component-static-resource-management {
				height: 100%;
			}
		}
	}

	.el-collapse-item__wrap {
		overflow: visible;
		border-bottom: unset;
	}

	.el-collapse-item__header {
		border-bottom: unset;
	}

	.el-collapse-item:last-child {
		margin-bottom: unset;
	}
}
</style>
